<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px" v-show="tag == '添加'">
      <el-form-item label="用户名">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.passWord"></el-input>
      </el-form-item>
      <el-form-item label="管理员姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="form.role" placeholder="请选择活动区域">
          <el-option label="超级管理员" :value="1"></el-option>
          <el-option label="管理员" :value="2"></el-option>
          <el-option label="普通人员" :value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(tag)">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-form
      ref="editForm"
      :rules="rules"
      :model="editForm"
      label-width="80px"
      v-show="tag == '编辑'"
    >
      <el-form-item label="id">
        <el-input v-model="editForm.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="editForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input v-model="editForm.passWord"></el-input>
      </el-form-item>
      <el-form-item label="管理员姓名">
        <el-input v-model="editForm.name"></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="editForm.role" placeholder="请选择活动区域">
          <el-option label="超级管理员" :value="1"></el-option>
          <el-option label="管理员" :value="2"></el-option>
          <el-option label="普通人员" :value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(tag)">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tag: "添加", //标记从哪里跳转过来
      form: {
        userName: "",
        passWord: "",
        name: "",
        role: "",
      },
      editForm: {
        passWord: "",
      },
      //验证password
      rules: {
        passWord: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(tag) {
      if (tag == "编辑") {
        // console.log(tag);
        //验证通过的话调用编辑接口

        this.$refs["editForm"].validate((valid) => {
          if (valid) {
            this.$axios
              .put("/admin", {
                ...this.editForm,
              })
              .then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                  this.$router.push("/home/user");
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "error",
                  });
                }
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.$axios
          .post("/admin", {
            ...this.form,
          })
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$router.push("/home/user");
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error",
              });
            }
          });
      }
    },
  },
  created() {
    if (this.$route.query.tag == "编辑") {
      console.log(this.$route.query.data);
      this.tag = this.$route.query.tag;
      // this.onSubmit(this.tag);
      this.editForm = this.$route.query.data;
    }
  },
};
</script>

<style lang="scss" scoped>
.container ::v-deep {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        width: 82px !important;
      }
      .el-form-item__content {
        margin-left: 84px !important;
      }
    }
  }
}
</style>